<template>
	<view>
		<view class="detail_header_title">
			单号-{{Detail_code}}
			<!-- <image src="../../../static/changeIcon.png" @tap="Switchstyles()"></image> -->
		</view>
		<scroll-view scroll-x class="detail_body">
			<view class="orderList" :style="{height: orderListHeight + 'px'}" v-show="Switchstyle==1">
				<view class="orderNav" :style="{width:tdAllWidth+'px'}">
					<text :style="{width:tdWidth[0]+'px'}">序号</text>
					<text :style="{width:tdWidth[1]+'px'}">商品名称</text>
					<text :style="{width:tdWidth[2]+'px'}">编号</text>
					<text :style="{width:tdWidth[3]+'px'}">规格</text>
					<text :style="{width:tdWidth[4]+'px'}">单位</text>
					<text :style="{width:tdWidth[5]+'px'}">仓库</text> 
					<text :style="{width:tdWidth[6]+'px'}" >批号</text>
					<text :style="{width:tdWidth[7]+'px'}" >单价</text>
					<text :style="{width:tdWidth[8]+'px'}" >折扣</text>
					<text :style="{width:tdWidth[9]+'px'}" >金额</text>
					<text :style="{width:tdWidth[10]+'px'}" >数量</text>
					<text :style="{width:tdWidth[11]+'px'}" >备注</text>
				</view>
				<view class="orderLi" :style="{height:orderLiHeight +'px',width:tdAllWidth+'px'}">
					<view class="orderItem" v-for="(item,index) in Detail_info"  
									 :class="[{'background':!(index%2==0) && Switchstyle==1}]"  :key="index" @tap="checktr(index)">
						<view :style="{width:tdWidth[0]+'px'}">{{index+1}}</view>
						<view :style="{width:tdWidth[1]+'px'}">{{item.GoodsName}}</view>
						<view :style="{width:tdWidth[2]+'px'}">{{item.GoodsCode}}</view>
						<view :style="{width:tdWidth[3]+'px'}">{{item.Spec}}</view>
						<view :style="{width:tdWidth[4]+'px'}">{{item.UnitName}}</view>
						<view :style="{width:tdWidth[5]+'px'}">{{item.stockName}}</view>
						<view :style="{width:tdWidth[6]+'px'}">{{item.BatchNo || ""}}</view>
						<view :style="{width:tdWidth[7]+'px'}">{{toFix(item.Price)}}</view>
						<view :style="{width:tdWidth[8]+'px'}">{{item.Discount}}</view>
						<view :style="{width:tdWidth[9]+'px'}">{{toFix(item.Amount)}}</view>
						<view :style="{width:tdWidth[10]+'px'}">{{toFix(item.Qty)}}</view>
						<view :style="{width:tdWidth[11]+'px'}">{{item.Remark}}</view>
					</view>
				</view>
			</view>
			<!-- 列表形式 -->
			<scroll-view scroll-y style="overflow-y: scroll;height: 82%;padding-bottom: 60px;" v-show="Switchstyle==2">
				<!-- :class="['user_list',{'user_list_success':index == checklist}]" -->
				<view v-for="(item,index) in Detail_info" :class="['item_list',{'item_table':index == unfold}] " :key="item.id">
					<p>商品名称：{{item.GoodsName}}</p>
					<p>编号：{{item.GoodsCode}} <span style="margin-left: 15px;">规格：{{item.Spec}}</span></p>
					<p>单位：{{item.UnitName}}<span style="margin-left: 15px;">仓库：{{item.stockName}}</span></p>
					<p>批号：{{item.BatchNo  || ""}}</p>
					<!-- <p>生产日期：{{timesubstr(item.ProductionDate)}} <span style="margin-left: 15px;">到期日期：{{timesubstr(item.validityDate)}}</span></p> -->
					<p>单价：{{toFix(item.Price)}} <span style="margin-left: 15px;">折扣：{{item.Discount}}</span></p>
					<p>金额：{{toFix(item.Amount)}}<span style="margin-left: 15px;">数量：{{toFix(item.Qty)}}</span></p>
					<p>备注：{{item.Remark}}</p>
					<div class="radius" @tap="unfolds(index)">
						<div class="d3" v-if="index != unfold"></div>
						<div class="d4" v-else></div>
					</div>
				</view>
			</scroll-view>
		</scroll-view>
		<view class="Detail_footer">
			<view class="Detail_sum">总行数:{{Detail_length}} 总数量:{{Detail_sum}} 总金额:{{Detail_money}}</view>
			<view class="btnall">
				<view class="btn_back" @tap="back">返回上页</view>
				<!-- <view class="btn_back" @tap="change">修改单据</view> -->
			</view>

		</view>
	</view>
</template>

<script>
	import * as ApiBb from '@/syApis/sygetOrder/apis.js';
	export default {
		data() {
			return {
				Detail_info: [], //商品明细数据
				Detail_length: 0, //商品明细总行数
				Detail_sum: 0, //商品明细总数量
				Detail_money: 0, //商品明细总金额
				Detail_code: '', //商品明细单号
				Switchstyle: 2, //明细风格切换
				unfold: -1, // 展开
                BillType:"",//单据编号
				NowOrder:{},
				orderListHeight: 300,
				orderLiHeight: 260,
				orderList: [],
				tdWidth: [50, 60, 125, 125, 125, 125, 125,125,125,125,,125,125],
			}
		},
		onLoad: function(options) {
			this.Detail_code = options.BillNo; //明细单号
            this.BillType = options.BillType;
			let detailid = options.id
			console.log('新的页面打印')
			console.log(options)
			// 采购入库单明细
			this.selectDetail(detailid) //初始化查询明细
			this.getThisOrder(options.id);
			// uni.setNavigationBarTitle({
			// 	title: this.Detail_code+"明细"
			// })
		},
		//页面加载完成获取高度
		onReady(){
			var that = this
			uni.getSystemInfo({
			　　success: function(res) { // res - 各种参数
			    var headerheight =0;
				var footerheight = 0;
			　	let header = uni.createSelectorQuery().select(".detail_header_title");
			　　　  　header.boundingClientRect(function(data) { //data - 各种参数
			// 　　　  　console.log("元素的高度"+data.height)  // 获取元素宽度
			        console.log(data)
					  headerheight = data.height
					 // that.orderListHeight = res.windowHeight - data.height;
					 // that.orderLiHeight = (res.windowHeight - data.height) - 40;
					 
			　　    }).exec()
			    let footer = uni.createSelectorQuery().select(".Detail_footer");
			　　　  　footer.boundingClientRect(function(data) { //data - 各种参数
			// 　　　  　console.log("元素的高度"+data.height)  // 获取元素宽度
			        console.log(data)
					footerheight = data.height
					 // that.orderListHeight = res.windowHeight - data.height;
					 // that.orderLiHeight = (res.windowHeight - data.height) - 40;
					 
			　　    }).exec()
			//表格高度
			that.orderListHeight = res.windowHeight -(headerheight+footerheight)
			// 表格内容高度
			that.orderLiHeight = res.windowHeight -(headerheight+footerheight) - 10
			
			       
			   },
				  
			});
		},
		computed: {
			tdAllWidth() {
				var tdAllWidth = 0;
				this.tdWidth.forEach(item => {
					tdAllWidth += parseFloat(item);
				});
				tdAllWidth += this.tdWidth.length - 1;
				return tdAllWidth;
			}
		},
		methods: {
			onNavigationBarButtonTap(e) {
				const index = e.index;
				console.log(index);
				if (index === 0) {
			          this.Switchstyles();
				} else if (index === 1) {
					
				}
			},
			//获取当条数据
			getThisOrder(BillID){
				let data = {
					BillType:this.BillType,
					Filter:"BillID="+BillID
				}
				var that = this;
				ApiBb.SelectBillOrderMaster(data,function(res){
						  if(res.state){
							   if(res.data.ErrorMsg=="获取登录信息失败"){
								   ApiBb.showTip("登录超时");
							   }else if(res.data.ErrorMsg!=""){
								   ApiBb.showTip(res.data.ErrorMsg);
							   }else if(res.data.TipsMsg == "OK" && res.data.ResultMsg == ""){
								   ApiBb.showTip("查无数据");
							   }else{
								   that.NowOrder = res.data.ResultMsg[0];
							   }
						  }else{
							  ApiBb.showTip("服务器错误!");
						  }
					});
				
			},
			//修改单据
			change(){
				let BillName = this.BillType=='1'?'采购订单':this.BillType=='4'?'销售订单':'促销单'
				uni.navigateTo({
					url: "../../add-order/add-cgorder?BillName=" +BillName +"&oldOrder="+JSON.stringify(this.NowOrder)+"&type=1"
				})
			},
			// 查看明细
			selectDetail: function(e) {
				var that = this;
				let ClientID = uni.getStorageSync("UserCode");
				let CreateName = uni.getStorageSync("UserName");
				let Detailid = e;
				
				let data = {
					BillType: this.BillType,
					BillID: Detailid
				};
				ApiBb.SelectBillOrderDetail(data, function(res) {
					if (res.state) {
						console.log(res)
						if (res.data.ErrorMsg == "获取登录信息失败") {
							ApiBb.showTip("登录超时");
						} else if (res.data.ErrorMsg != "") {
							ApiBb.showTip(res.data.ErrorMsg);
						} else {
							// Detail_length:0,//商品明细总行数
							// Detail_sum:0,//商品明细总数量
							// Detail_money:0,//商品明细总金额
							console.log('这是长度')
							console.log(res.data.ResultMsg.length)
							that.Detail_info = res.data.ResultMsg;
							let money = 0;
							let sum = 0;
							for (let i in res.data.ResultMsg) {
								// console.log('这两个是长度')
								// console.log(i)
								// console.log(res.data.ResultMsg[i])
								money += parseFloat(res.data.ResultMsg[i]['Amount']) //总金额
								sum += parseFloat(res.data.ResultMsg[i]['Qty']) //总数量
							}
							that.Detail_length = res.data.ResultMsg.length;
							that.Detail_sum = sum.toFixed(2);
							that.Detail_money = money.toFixed(2);
							// that.Detail_code = that.tableList[e]['BillNo']
							// price.toFixed(2);
							console.log('这是总金额')
							console.log(money.toFixed(2))
							console.log('这是总数量')
							console.log(sum.toFixed(2))
						}
					} else {
						ApiBb.showTip("服务器错误!");
					}
				});
				console.log(e)
			},

			// 日期截取
			timesubstr: function(e) {
				if(e=="" || typeof e=="undefined"){
					return "";
				}
				return e.substring(0, 10)
			},
			//保留两位小数
			toFix: function(evt) {
				if (evt == "" || evt == undefined) {
					return evt
				}
				evt = parseFloat(evt);
				return evt.toFixed(2) //此处2为保留两位小数
			},
			//是否展开
			unfolds: function(e) {
				if (this.unfold == e) {
					this.unfold = -1
				} else {
					this.unfold = e
				}
			},
			//返回上一页
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//切换风格
			Switchstyles: function() {
				this.Switchstyle = this.Switchstyle == 1 ? 2 : 1
			},
		}
	}
</script>

<style lang="scss">
	@import url("selectdetail.css");
	/* page {
		background-color: #EEEEEE;
		padding-bottom: 0upx;
		height: 100%;
	} */
	//表格单据
	.orderList {
		width: 100%;
		overflow: auto;
		box-sizing: border-box;
	
		text {
			float: left;
			text-align: center;
			box-sizing: border-box;
			height: 40px;
			line-height: 40px;
			border-right: 1px solid #CCC;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
	
			&:last-child {
				border: none;
			}
		}
	
		.orderNav {
			height: 40px;
			line-height: 40px;
			box-sizing: border-box;
			overflow: hidden;
			border-top: 1px solid #CCC;
			border-left: 1px solid #FFF;
			background: #FFF;
	
		}
	
		.orderLi {
	
			background: #ebebeb;
			overflow: auto;
	
			.orderItem {
				height: 40px;
				line-height: 40px;
				width: 100%;
				border: 1px solid #ebebeb;
				box-sizing: border-box;
				display: table;
				border-bottom: 1px solid #CCCCCC;
	
				view {
					display: inline-block;
					height: 100%;
					line-height: 35px;
					float: left;
					text-align: center;
					border-right: 1px solid #CCC;
					box-sizing: border-box;
					padding-top: 5upx;
					padding-bottom: 5upx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
	
					image {
						width: 60px;
						margin: auto;
						display: table;
					}
	
					&:last-child {
						border: none;
					}
	
				}
			}
		}
	
		.allPrice {
			@extend .orderNav;
			background: rgba(124, 170, 216, 1);
			color: #FFF;
		}
		.background{
			background-color: #fff;
		}
	}
</style>
